<template>
  <modal :visible="visible" @close="close">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <h1 class="title">频道配置</h1>
        <div class="block">
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">频道名:</label>
            </div>
            <p class="control">
              <input class="input" v-model="item.program" type="text" placeholder="频道名">
            </p>
          </div>
          <div class="control is-horizontal" v-if="nameTip">
            <div class="control-label">
            </div>
            <p class="control">
              <span class="help tip">{{nameHelp}}</span>
            </p>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">类型:</label>
            </div>
            <p class="control">
              <input class="input" v-model="item.type" type="text" placeholder="类型">
            </p>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">URL:</label>
            </div>
            <p class="control">
              <input class="input" v-model="item.url" type="text" placeholder="URL">
            </p>
          </div>


          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label"></label>
            </div>
            <div class="control">
              <button class="button is-primary" @click="add(programInfo)">确定</button>
              <button class="button is-link" @click="close">取消</button>
            </div>
          </div>
        </div>
      </article>
    </div>
  </modal>
</template>

<script>
  import {Modal} from 'vue-bulma-modal'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    components: {
      Modal
    },
    data () {
      return {
        nameTip: false,
        nameHelp: '',
        item: {
          program: '',
          type: '',
          url: ''
        }
      }
    },
    props: {
      visible: Boolean
    },
    computed: {
      programInfo: function () {
        var that = this
        return {
          program: that.item.program,
          type: that.item.type,
          url: that.item.url
        }
      },
      ...mapGetters(['programList'])
    },
    methods: {
      close () {
        this.$emit('close')
      },
      ...mapActions(
        ['addProgram']
      ),
      add (data) {
        this.addProgram(data)
        this.close()
      }
    }
  }
</script>
<style scoped>
  .tip {
    color: red;
  }
</style>
